<div id="PreCustomerDataView" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml" style=" height:100%;margin: 0px;padding: 0px;">
        <div class="row clearfix" style="height: 50%">
            <div class="col-md-4 column" style="height: 100%" id="SumQuantity">
            </div>
            <div class="col-md-4 column" style="height: 100%" id="GoodsQuantity">
                sad
            </div>
            <div class="col-md-4 column" style="height: 100%" id="CustomerQuantity">
                asdd
            </div>
        </div>
</div>

<script>
    $(document).ready(function(){
        //采用vue
        var PreCustomerDataView=new Vue({
            el: '#PreCustomerDataView',
            data: {
                initSumQuantityUrl : '/business/customer/pre/order/getSumQuantityDataView',
                initGoodsQuantityUrl : '/business/customer/pre/order/getQuantityByGoods',
                initCustomerQuantityUrl : '/business/customer/pre/order/getQuantityByCustomer',
            },
            methods: {
                init:function () {
                    var that = this;
                    this.$send(Vue.prototype.getUrl(this.initSumQuantityUrl),null,function(data){
                        let dateArr = [];
                        let valueArr = [];
                        for(var i in data) {
                            dateArr.push(data[i].date);
                            valueArr.push(data[i].value);
                        }
                        that.initSumQuantityCharts(dateArr,valueArr);
                    });


                    this.$send(Vue.prototype.getUrl(this.initGoodsQuantityUrl),null,function(data){
                        let dateArr = [];
                        let valueArr = [];
                        for(var i in data) {
                            dateArr.push(data[i].date);
                            valueArr.push(data[i].value);
                        }
                        that.initGoodsQuantity(dateArr,valueArr);
                    });


                    this.$send(Vue.prototype.getUrl(this.initCustomerQuantityUrl),null,function(data){
                        let dateArr = [];
                        let valueArr = [];
                        for(var i in data) {
                            dateArr.push(data[i].date);
                            valueArr.push(data[i].value);
                        }
                        that.initCustomerQuantity(dateArr,valueArr);
                    });
                },
                initSumQuantityCharts: function(dateArr,valueArr) {
                    console.log(document.getElementById('SumQuantity'));
                    var sumQuantityChart = echarts.init(document.getElementById('SumQuantity'));
                    var app = {};
                    option = null;
                    option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        title: {text:'30天内-整体销量曲线图'},
                        xAxis: {
                            type: 'category',
                            data: dateArr
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: valueArr,
                            type: 'line',
                            smooth: true,
                            name:'销量:'
                        }]
                    };
                    console.log(option);
                    if (option && typeof option === "object") {

                        sumQuantityChart.setOption(option, true);
                    }
                },

                initGoodsQuantity: function(dateArr,valueArr) {
                    var goodsQuantity = echarts.init(document.getElementById('GoodsQuantity'));
                    option = null;
                    option = {
                        title: {text:'30天内-单品销量TOP10'},
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },

                        xAxis: {
                            type: 'category',
                            data: dateArr,
                            axisLabel: {
                                interval:0,
                                rotate:20
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: valueArr,
                            type: 'bar',
                            name:'销量'
                        }]
                    };
                    console.log(option);
                    if (option && typeof option === "object") {
                        goodsQuantity.setOption(option, true);
                    }
                },

                initCustomerQuantity:function (dateArr,valueArr) {
                    var customerQuantity = echarts.init(document.getElementById('CustomerQuantity'));
                    option = null;
                    option = {
                        title: {text:'30天内-商家销量TOP10'},
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: dateArr,
                            axisLabel: {
                                interval:0,
                                rotate:20
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: valueArr,
                            type: 'bar',
                            name:'销量'
                        }]
                    };
                    console.log(option);
                    if (option && typeof option === "object") {
                        customerQuantity.setOption(option, true);
                    }
                }
            },
            created: function () {
                this.init();
            },
            mounted: function () {

            },
        });

    });

</script>
